<template>
  <!-- 背景组件 -->
  <code-rain class="code-rain-background"></code-rain>
  <!-- 菜单内容 -->
  <menu-layout class="menu-layout"></menu-layout>
  <div class="message-list">
    <h2>消息列表</h2>
    <div v-if="isLoading" class="loading">
      加载中...
    </div>
    <div v-else-if="messages.length === 0" class="no-messages">
      暂无新消息
    </div>
    <div v-else>
      <div v-for="message in messages" :key="message.id" class="message-item">
        <div class="sender-info">
          <img
            :src="message.senderAvatar"
            alt="头像"
            class="avatar"
            @click="handleToOtherPage(message.senderId)"
          />
          <span class="sender-name">{{ message.senderName }}</span>
        </div>
        <div class="message-content">
          <span class="action-icon">{{ getActionIcon(message.actionType) }}</span>
          <span>{{ message.content }}</span>
        </div>
        <div class="message-time">
          {{ new Date(message.createdAt).toLocaleString() }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { API_BASE_URL } from '@/config/config';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import MenuLayout from '@/components/MenuLayout.vue'
import codeRain from '@/components/codeRain.vue'

const messages = ref([]); // 消息列表
const isLoading = ref(true); // 加载状态
const router = useRouter();
const user = ref([]);

// 获取消息列表
const fetchMessages = async () => {
  try {
    const response = await axios.get(`${API_BASE_URL}/message/list`, { withCredentials: true });
    console.log('接口返回的数据:', response.data); // 打印接口返回的数据
    if (response.data && Array.isArray(response.data.data)) {
      messages.value = response.data.data;
    } else {
      console.error('接口返回的数据格式不正确:', response.data);
      messages.value = [];
    }
  } catch (error) {
    console.error('获取消息列表失败:', error);
    messages.value = [];
  } finally {
    isLoading.value = false; // 无论成功或失败，加载状态结束
  }
};

const getUserData = async () => {
  const GET_USER_URL = `${API_BASE_URL}/userInfo`;
  const userId = route.params.userId;
  try {
    const response = await axios.get(GET_USER_URL, {
      params: {
        userId: userId,
      },
    });
    if (response.data.code === 200) {
      user.value = response.data.users;
    }
  } catch (error) {
    ElMessage.error('error' + error.message);
  }
};

// 组件挂载时获取消息列表
onMounted(() => {
  fetchMessages();
  getUserData();
});

// 根据操作类型显示不同的图标
const getActionIcon = (actionType) => {
  switch (actionType) {
    case 'like':
      return '👍';
    case 'comment':
      return '💬';
    case 'follow':
      return '👤';
    default:
      return '';
  }
};

const handleToOtherPage = (id) => {
  router.push({ name: 'Other_user', params: { userId: id } });
};
</script>

<style scoped>
/* 背景组件样式 */
.code-rain-background {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%; /* 覆盖整个页面宽度 */
  height: 100%; /* 覆盖整个页面高度 */
  z-index: -1; /* 确保在其他内容下方 */
}

/* 菜单组件样式 */
.menu-layout {
  position: fixed; /* 绝对定位 */
  top: 0; /* 固定在页面顶部 */
  left: 0;
  width: 100%; /* 宽度覆盖整个页面 */
  z-index: 1; /* 确保在 codeRain 上方 */
  color: #fff; /* 可选：设置文字颜色 */
  margin: 0;
}
.message-list {
  position: absolute;
  top: 20%;
  left: 25%;
  width: 50vw;
  height: 60vh;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: auto;
}

.loading,
.no-messages {
  text-align: center;
  color: #999;
  font-size: 16px;
}

.message-item {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.message-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.sender-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.avatar:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.sender-name {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.message-content {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #555;
}

.action-icon {
  margin-right: 8px;
  font-size: 18px;
}

.message-time {
  margin-top: 5px;
  font-size: 12px;
  color: #999;
  text-align: right;
}
</style>
